<template>
  <div class="w-screen h-screen login-container">
    <div class="fixed rounded-lg bg-[var(--el-card-header-bg-color)] w-[450px] right-[10%] top-[50%] -translate-y-1/2 p-[50px]">
      <h1 class="text-[50px] text-[var(--el-text-color-regular)]">welcome back</h1>
      <p class="text-xs text-[#617285] mt-2">Enter account password to log in</p>
      <div class="mt-6 bg-[#e2e2e2] rounded p-5 pt-7">
        <custom-form
          ref="loginRef"
          label-width="atuo"
          label-position="top"
          :form-items="formBase"
          :item-style="formItemStyle"
          :model-value="loginForm"
          :layout-vertical="true"
          right-width="auto"
          @update="row => (loginForm = row)"
        >
          <template #footer>
            <div class="flex flex-col">
              <el-button type="primary" @click="submitLogin" :loading="loading">{{ $t('login.index.861829-0') }}</el-button>
            </div>
          </template>
        </custom-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import customForm from '@/components/customForm'
import { formBase, formItemStyle } from './config.js'
import { hrefSetToken, setToken} from "@/utils/setting.js";
import {validateKey} from "@/api/login.js";

const route = inject('route')
const loginRef = ref() // 登录表单实例对象
const loginForm = ref({ key: '' })
const loading = ref(false)

// 登录
const submitLogin = async () => {
  const flag = await loginRef.value.haveValidate()
  if (flag) {
    loading.value = true
    validateKey(loginForm.value).then(res => {
      setToken(loginForm.value.key)
      hrefSetToken(loginForm.value.key)
      sessionStorage.setItem('is404', 'true')
      route.value = {
        path: '/mess',
        meta: { title: 'src.App.054912-0' },
        params: {}
      }
    }).catch(() => {
      loginForm.value.key = ''
      ElMessage.error('密钥无效!')
    }).finally(() => {
      loading.value = false
    })
  }
}
</script>

<style lang='scss' scoped>
.login-container {
  background: url('@/assets/icons/login_bg.png') no-repeat center center;
  background-size: cover;
}

.login-form {
  border-radius: 6px;
  padding: 25px 25px 5px 25px;
  .el-input {
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 0px;
  }
}
.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.login-code {
  width: 33%;
  height: 34px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
.login-code-img {
  height: 100%;
  padding-left: 12px;
}
:deep(.el-input) {
  .el-input__inner {
    height: 100%;
  }
  .el-input__inner:-webkit-autofill {
    transition: background-color 5000s ease-in-out 0s;
  }
}
</style>